<!-- 管理员:课程考核管理:题库和在线考试管理:试卷库管理:新增试卷:第三步 -->
<template>
  <div style="width:100% !important;">
    <form class="el-form">
      <div class="el-form-item">
        <label class="el-form-item__label">
          <span style="height:20px;line-height:20px;display:inline-block;border-left:1vh solid #004ca7;padding-left:2vh;">有限期限</span>
        </label>
        <div class="el-form-item__content"
             style="margin:0 0 0 3vh;">
          <div class="el-row"></div>

          <el-radio-group v-model="radio">
            <el-radio :label="3">
              <!-- <span class="el-radio__input">
                  <input type="radio"
                         v-model="radio"
                         aria-hidden="true"
                         tabindex="-1"
                         class="el-radio__original"
                         value="1">
                </span> -->
              <span class="el-radio__label">试卷开放时间</span>
              <el-date-picker v-model="StartDate"
                              type="date"
                              size="mini"
                              style="width:130px;margin:0 0 0 15px;"
                              placeholder="选择日期">
              </el-date-picker>
              <el-time-picker size="mini"
                              style="width:120px;margin:0 0 0 15px;"
                              v-model="StarTime"
                              :picker-options="{
        selectableRange: '07:30:00 - 21:30:00'
      }"
                              placeholder="任意时间点">
              </el-time-picker>
              -
              <el-date-picker v-model="EndDate"
                              type="date"
                              size="mini"
                              style="width:130px;margin:0 0 0 15px;"
                              placeholder="选择日期">
              </el-date-picker>
              <el-time-picker size="mini"
                              style="width:120px;margin:0 0 0 15px;"
                              v-model="EndTime"
                              :picker-options="{
        selectableRange: '07:30:00 - 21:30:00'
      }"
                              placeholder="任意时间点">
              </el-time-picker>
              <span style="display:inline-block;width:20px;">&nbsp;</span>
              迟到时长：
              <el-input size="mini"
                        v-model="LateHours"
                        style="width:50px;margin: 0 1vh 0 0;" />分种
            </el-radio>
            <el-radio :label="6">
              <span class="el-radio__label">永久有效</span>

            </el-radio>
            <el-radio :label="9">
              <span class="el-radio__label">不可用</span>

            </el-radio>
          </el-radio-group>

        </div>
      </div>
      <!-- sep -->
      <div class="el-form-item">
        <label class="el-form-item__label">
          <span style="height:20px;line-height:20px;display:inline-block;border-left:1vh solid #004ca7;padding-left:2vh;">答卷次数</span>
        </label>
        <div class="el-form-item__content"
             style="margin:0 0 0 3vh;">
          <div class="el-row"></div>
          <div class="el-row">
            <el-radio-group v-model="dajuancishu">
              <el-radio :label="1">无限次</el-radio>
              <el-radio :label="2">多次：
                <el-input style="width:50px;margin:0 1vh 0 1vh"
                          size="mini"
                          v-model="AnswerTimes" /> 次
              </el-radio>
              <el-radio :label="3">每天每人：
                <el-input style="width:50px;margin:0 1vh 0 1vh"
                          v-model="DayAnswerTimes"
                          size="mini" /> 次
              </el-radio>
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- sep -->
      <div class="el-form-item">
        <label class="el-form-item__label">
          <span style="height:20px;line-height:20px;display:inline-block;border-left:1vh solid #004ca7;padding-left:2vh;">答题时间控制</span>
        </label>
        <div class="el-form-item__content"
             style="margin:0 0 0 3vh;">
          <div class="el-row"></div>
          <el-radio-group v-model="radio1">
            <el-radio :label="3"> <span class="el-radio__label">答卷时间</span><br />
              <el-radio-group v-model="radio2"
                              class="radio2">
                <el-radio :label="3"> <span class="el-radio__label">独立时间</span></el-radio>
                <el-radio :label="6"><span class="el-radio__label"
                        @click=timetip>动态时间</span>
                  <span class="el-radio__label">最短交卷时间</span>
                  <el-input size="mini"
                            style="width:50px;margin:0 1vh;" />秒
                </el-radio>
              </el-radio-group>
            </el-radio>
            <el-radio :label="6"> <span class="el-radio__label">单题作答时间</span> <br />
              <span class="el-radio__label">中断保存时间：</span>
              <el-input size="mini"
                        style="width:50px;margin:0 1vh;" /> 分钟
            </el-radio>

          </el-radio-group>
          <div class="el-row">
            <div class="el-form-item">
              <div class="el-form-item__content"
                   style="margin:0 0 0 3vh;">
                <div class="el-row"></div>

              </div>
            </div>
          </div>

        </div>
      </div>
    </form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio1: '',
      radio2: '',
      dajuancishu: '',
      LateHours: 0,
      EndTime: '',
      EndDate: '',
      StarTime: '',
      StartDate: '',
      radio: 1,
      AnswerTimes: '',
      DayAnswerTimes: '',
    }
  },
  methods: {
    timetip() {
      this.$alert(
        '选择动态时间需要设置试卷开放时间且最大时间间隔为24个小时',
        '提示',
        {
          confirmButtonText: '确定',
          callback: (action) => {
            this.$message({
              type: 'info',
              message: `action: ${action}`,
            })
          },
        }
      )
    },
  },
}
</script>
<style lang="less" scoped>
.el-radio {
  display: block;
  line-height: 26px;
}
.radio2 {
  margin-left: 20px;
}
@import '../../courseAssessmentScoped.less';
@import '../../exportBtn.less';
</style>